<template>
	<view>
	        <view>
	            <view class="u-demo-block boxtop">
	                <text class="u-demo-block__title boxtitle">原始数据集：{{animal}}</text>
	                <view class="switchbutton">
	                    <u-button @click="openanimaltext"
	                        size="normal" text="Switch" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
	                </view>
	                <u-swiper
	                    :list="list3"
	                    previousMargin="30"
	                    nextMargin="30"
	                    circular
	                    :autoplay="false"
	                    radius="5"
	                    bgColor="#ffffff"
	                ></u-swiper>
	            </view>
	        </view>
	        
	        <u-popup :show="showtext" mode="left" @close="closeanimaltext" @open="openanimaltext">
	            <view class="u-page">
	                <u-list>
	                    <u-list-item v-for="(item, index) in indexList" :key="index">
	                        <u-cell @click="switchanimal(index)" :title="item.animalName">
	                        </u-cell>
	                    </u-list-item>
	                </u-list>
	            </view>
	        </u-popup>
	
	        <u-notify ref="uNotify" message="切换成功!"></u-notify>
	        <u-picker :show="showmodelchoice" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
	
	        <view class="netbox">
	            <u-alert :title="title" type="warning" :description="description"></u-alert>
	            <view class="innerbutton">
	                <u-button @click="switchmodel()"
	                    text="更换模型" color="linear-gradient(to left, rgba(255, 255, 224, 1), rgba(0, 0, 0, 1))"></u-button>
	            </view>
	        </view>
	
	        <view class="demobox">
	            <u-line color="#2979ff" dashed></u-line>
	        </view>
	
	        <view class="u-page">
	            <view class="u-demo-block">
	                <view class="u-demo-block__content">
	                    <view class="album__content">
	                        <u--text
	                            text="Animal Pose"
	                            type="primary"
	                            bold
	                            size="17"
	                        ></u--text>
	                        <u--text margin="0 0 8px 0" text="定义了 17 个关键点来代表动​​物姿势"></u--text>
	                        <u--text margin="0 0 8px 0" text="包括两只眼睛、一个鼻子、一个脖子、一个尾巴"></u--text>
	                        <u--text margin="0 0 8px 0" text="两个肩膀、两个肘部、两个膝盖、两个臀部和四个爪子"></u--text>
	                        <u-album :urls="urls1" keyName="src2" singleSize="370"></u-album>
	                    </view>
	                </view>
	            </view>
	        </view>
			<view class="buttonVideo">
				<u-icon @click="switchVideo()" name="arrow-rightward" color="#2979ff" size="28"></u-icon>
			</view>
			<u-divider
			        text="YoloV8目标检测与体姿实时任务示例"
			        textColor="#2979ff"
			        lineColor="#ff0000"
			></u-divider>
			<view class="videobox">
				<u-swiper
					height=300
				    :list="list4"
				    keyName="url"
				    :autoplay="false"
				></u-swiper>
			</view>
	        <u-divider
	                text="训练好的模型 导入视频检测 v8s,v11s"
	                textColor="#2979ff"
	                lineColor="#ff0000"
	        ></u-divider>
			<u-alert :title="yolotitle" type="warning"></u-alert>
			<view class="buttontwo">
			    <u-button @click="switchyolomodel()"
			        text="更换模型" color="linear-gradient(to left, rgba(255, 255, 224, 1), rgba(0, 0, 0, 1))">
					</u-button>
			</view>
			<view class="boxtouploadvideo">
				<u-upload
					:fileList="fileList2"
					@afterRead="afterRead"
					@delete="deletePic"
					name="2"
					multiple
					:maxCount="10"
					accept="video"
					compressed=False
				></u-upload>
			</view>
			<u-divider
			        text="结果展示在此处"
			        textColor="#2979ff"
			        lineColor="#ff0000"
			></u-divider>
			<view class="resultvideobox">
				<u-swiper
					height=300
				    :list="list5"
				    keyName="url"
				    :autoplay="false"
				></u-swiper>
			</view>
	    </view>
</template>

<script>
	export default {
		data() {
			return {
				list3: [
				"http://www.xuuyy.icu:7789/processimg/animalimg/7/1.jpg",
				"http://www.xuuyy.icu:7789/processimg/animalimg/7/2.jpg",
				"http://www.xuuyy.icu:7789/processimg/animalimg/7/3.jpg",
				],
				list4: [{
					url: 'http://www.xuuyy.icu:7789/processimg/animalimg/output_dog.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				}
				],
				list5: [{
					url: 'http://www.xuuyy.icu:7789/processimg/animalimg/track_lu-v8s.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				}
				],
				fileList2: [],
				animal:"狗",
				yolomodel:0,      // 0代表v8s   1 代表v11s
				showmodelchoice:false,
				showtext:false,
				indexList: [],
				videoSwitch:false,
				title:'Model：HRNet-w48  AP:72.8%',
				description:'AP 指的是模型的 平均精度',
				yolotitle:"当前模型:yolov8s-pose",
				animalNames:[
				  "梅花鹿", "大角羊", "欧洲野牛", "非洲水牛", "夏洛莱牛", "绵羊", "无1", "狗", 
				  "红狐", "灰狼", "河狸", "吼猴", "红吼猴", "巴西夜猴", "长臂猿", "猕猴", 
				  "鹿", "麋鹿", "仓鼠", "亚洲象", "佩尔什马", "非洲斑马", "猞猁", "猫", 
				  "猎豹", "花豹", "猎豹", "花豹", "狮子", "黑豹", "雪豹", "老虎", 
				  "长颈鹿", "河马", "猩猩", "黑猩猩", "无2", "兔子", "臭鼬", "老鼠", 
				  "老鼠", "海獭", "黄鼠狼", "浣熊", "犀牛", "土拨鼠", "松鼠", "猪", 
				  "无3", "黑熊", "棕熊", "熊猫", "北极熊"
				],
				columns: [
					['HRNet', 'ResNet','CSPNeXt'],
					['w48', 'w32']
				],
				columnData: [
					['w48', 'w32'],
					['101','50'],
					['m']
				],
				albumWidth: 0,
				urls1: [{
					src2: 'http://www.xuuyy.icu:7789/processimg/animalimg/hrnet-w48.jpg',
				}]
			}
		},
		onLoad() {
					this.loadmore()
				},
		methods: {
			async afterRead(event){
				try{
					// const file = event.file;  // 获取文件的临时路径
					// const {data:res} = await uni.$http.get("/testpet")
					// console.log(res);
					const file = event.file;
					const filePath = file[0].url;  
					
					uni.uploadFile({
					            url: 'http://127.0.0.1:5050/uploadvideo',  // 后端接口地址，确保它能接收视频文件
					            filePath: filePath,  // 上传的视频文件路径
					            name: 'file',  // 后端接收文件的字段名
					            formData: {
					                user: 'test'  // 你可以在 formData 中传递其他需要的数据
					            },
					            success: (uploadRes) => {
					                // 处理上传成功的响应
					                console.log("File uploaded successfully:", uploadRes.data);

					            },
					            fail: (uploadErr) => {
					                // 处理上传失败的响应
					                console.error("File upload failed:", uploadErr);
					            }
					        });		
				}catch (error) {
					console.error(error);
				}
		},
		// async afterRead(event) {
		// 				let lists = [].concat(event.file)
		// 				let url = lists[0].url
		// 				console.log(url);
		// 				this.uploadFilePromise(url)
		// 			},
		// 			uploadFilePromise(url) {
		// 				return new Promise((resolve, reject) => {
		// 					let a = uni.uploadFile({
		// 						url: ' http://127.0.0.1:5000/uploadvideo', // 仅为示例，非真实的接口地址
		// 						filePath: url,
		// 						name: 'file',
		// 						formData: {
		// 							user: 'test'
		// 						},
		// 						success: (res) => {
		// 							setTimeout(() => {
		// 								resolve(res.data.data)
		// 							}, 1000)
		// 						}
		// 					});
		// 				})
		// 			},
		openanimaltext() {
		        // console.log('open');
				this.showtext = true
		      },
		closeanimaltext() {
			this.showtext = false
			// console.log('close');
		  },
		  scrolltolower() {
		  				this.loadmore()
		  			},
		loadmore() {
			for (let i = 0; i < 52; i++) {
				this.indexList.push({
					animalName: this.animalNames[i]
					// animalName: this.animalNames[uni.$u.random(0, this.animalNames.length - 1)]
				})
			}
		},
		async switchyolomodel(){
			if(this.yolomodel==0){
				this.yolomodel = 1
				this.yolotitle = "当前模型:yolov11s-pose"
			}
			else if(this.yolomodel == 1)
			{
				this.yolomodel = 0
				this.yolotitle = "当前模型:yolov8s-pose"
			}
			const { data: res } = await uni.$http.get("/setmodel");
			
			
		},
		switchanimal(index){
			console.log(index);
			this.$refs.uNotify.show({
			    top: 5,
			    type: 'error',
			    color: '#000',
			    bgColor: '#398ade',
			    message: '切换成功！',
			    duration: 1000 * 3,
			    fontSize: 20,
			    safeAreaInsetTop:true
			})
			
			this.animal = this.animalNames[index]
			this.refreshimgurl(index)
			console.log(this.list3);
			this.showtext = false		    
		},
		refreshimgurl(index){
			let baseUrl = "http://www.xuuyy.icu:7789/processimg/animalimg/"
			for (let i = 0; i < 3; i++) {
				this.list3[i] = baseUrl+index+"/"+(i+1)+".jpg"
				}
		},
		switchmodel(){
			this.showmodelchoice = true
		},
		changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				// console.log('confirm', e)
				// console.log(e.value[0])
				// console.log(e.value[1])
				// console.log(e.indexs[0]);
				// console.log(e.indexs[1]);
				let persentRateTable = [
				    ['72.8%', '72.2%'],  // 第一行
				    ['68.1%', '68.0%'],  // 第二行
				    ['70.3%', 0]   // 第三行
				];
				this.title = 'Model：'+e.value[0]+'-'+e.value[1]+'  AP:'+persentRateTable[e.indexs[0]][e.indexs[1]]
				
				let demo_imgname = e.value[0].toLowerCase()+"-"+e.value[1].toLowerCase()+'.jpg'
				let baseUrl = "http://www.xuuyy.icu:7789/processimg/animalimg/"
				this.urls1[0].src2 = baseUrl+demo_imgname
				// console.log(this.urls1[0].src2);
				
				
				this.showmodelchoice = false
			},
			switchVideo(){
				let urlList = ["http://www.xuuyy.icu:7789/processimg/animalimg/output_cat.mp4",
				"http://www.xuuyy.icu:7789/processimg/animalimg/output_dog.mp4"]
				if(this.videoSwitch){
					this.list4[0].url=urlList[1]
					}
				else{
					this.list4[0].url=urlList[0]
				}
				this.videoSwitch=!this.videoSwitch
			}
				

		}
	}
</script>

<style lang="scss">
.uploadvideo{
	position: absolute;
	left: 40%;
	top: 10%;
}
.boxtop{
	margin-top: 14%;
	
}
.boxtitle{
	position: absolute;
	top: 1%;
}
.switchbutton{
	width: 25%;
	position: absolute;
	top: 1%;
	right: 2%;
}
.netbox{
	margin-top: 7%;
	width: 72%;
	
}
.innerbutton{
	width: 25%;
	position: absolute;
	right: 0;
	top: 30%;
}
.buttontwo{
	width: 25%;
	position: absolute;
	right: 0;
	bottom: -61%;
}
.demobox{
	margin-top: 6%;
	margin-left: 2.5%;
	width: 95%;
	
	}
.album {
	@include flex;
	align-items: flex-start;

	&__avatar {
		 background-color: $u-bg-color;
		 padding: 5px;
		 border-radius: 3px;
	 }

	&__content {
		 margin-left: 10px;
		 flex: 1;
	 }
	}
.albumbox{
	position: absolute;
	margin-left: 5%;
}
.buttonVideo{
	position: absolute;
	right: 6%;
	margin-top: 2.5%;
}
.boxtouploadvideo{
	margin-left: 35%;
	margin-top: 10%;
}
</style>
